<template>
  <div>
    <p class="con-title">
      <span>
        <img src="@/assets/img/control/content/Group769.png" />
      </span>
      <span>云市场</span>
    </p>
  </div>
  <div class="query">
    <el-form ref="queryParamsRef" inline :model="queryParams">
      <el-form-item props="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入关键字"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querySearch">查询</el-button>
        <el-button type="primary" plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="dataList" header-cell-class-name="title-style" border>
    <el-table-column prop="corporateName" label="第三方企业" align="center" />
    <el-table-column prop="orderAbstract" label="订单摘要" align="center" />
    <el-table-column prop="periodType" label="计费模式" align="center">
      <template #default="scope">
        <span>{{ cPeriodType(scope.row.periodType) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="下单时间" align="center" />
  </el-table>

  <div class="page-footer">
    <el-pagination
      :total="total"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      layout="->,total, prev, pager, next"
      small
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getMarketServiceList } from "@/api/control/myServer";
//表格数据
const dataList = ref<any>([]);
//获取列表参数
const queryParams = ref<any>({
  searchValue: null,
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0); // 总条数

onMounted(() => {
  getList();
});

//获取表格数据
const getList = () => {
  getMarketServiceList(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

//搜索
const querySearch = () => {
  queryParams.value.pageNum = 1;
  getList();
};

//重置
const resetQuery = () => {
  queryParams.value.searchValue = null;
  queryParams.value.pageNum = 1;
  getList();
};

//转换计费模式的格式
const cPeriodType = (val: number) => {
  if (0 == val) {
    return "按次";
  } else if (1 == val) {
    return "按天";
  } else if (30 == val) {
    return "按月";
  } else if (365 == val) {
    return "按年";
  }
};
</script>
<style lang="less" scoped>
.con-title {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  span:nth-child(1) {
    display: flex;
    align-items: center;

    img {
      width: 14px;
      height: 14px;
    }
  }

  span:nth-child(2) {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 16px;
  }
}
.query {
  width: 100%;
  height: 50px;
  margin: 20px 0;
  display: flex;
}
.page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
